<template>
<div>
    <j-modal
      width="80%"
      :title="title"
      :visible.sync="editModalVisible"
      :fullscreen.sync="fullscreen"
      :switch-fullscreen="switchFullscreen"
      @cancel="handleCancleDbSync"
      :destroyOnClose="true"
    >
      <template slot="footer">
        <a-button @click="handleCancleDbSync">
          关闭
        </a-button>
        <a-button v-if="!isDetail" type="primary" :loading="syncLoading" @click="handleDbSync" >确定</a-button>
      </template>
      <div class="table-page-search-wrapper warp" :style="{maxHeight:fullscreen?'779px':'588px'}">
        <a-form-model ref="ruleForm" :model="formData" :rules="isDetail?{}:rules" :label-col="labelCol" :wrapper-col="wrapperCol">
            <a-form-model-item v-if="isImport" label="导入类型" prop="importType">
              <a-select placeholder="请选择导入类型"  v-model="formData.importType" @change="importTypeChange" :getPopupContainer="node => node.parentNode">
                <a-select-option :value="1">数据源导入</a-select-option>
                <a-select-option :value="2">DDL导入</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item v-if="isImport&&formData.importType==2" label="DDL类型" prop="dbType">
              <a-select placeholder="请选择DDL类型"  v-model="formData.dbType" :getPopupContainer="node => node.parentNode">
                <a-select-option value="MYSQl">MYSQl</a-select-option>
                <a-select-option value="ORACLE">ORACLE</a-select-option>
              </a-select>
            </a-form-model-item>
            <a-form-model-item v-if="isImport&&formData.importType==2" label="DDL语句" prop="sql">
                <a-textarea v-model="formData.sql" placeholder="请输入DDL语句" allow-clear :auto-size="{ minRows: 3, maxRows: 5 }" />
            </a-form-model-item>
            <a-row v-if="isImport&&formData.importType==2">
              <a-col :span="16" class="ddl-style">
                <a-button type="primary" @click="ddlImport" >生成</a-button>
              </a-col>
            </a-row>
            <a-form-model-item v-if="isImport&&formData.importType==1" label="数据源" prop="source">
                <a-select placeholder="请选择数据源" @change="updateOriginal" v-model="formData.source" :getPopupContainer="node => node.parentNode">
                  <a-select-option v-for="item in originalList" :key="item.id" :value="item.id">
                    {{ item.dataSourceName }}
                  </a-select-option>
                </a-select>
            </a-form-model-item>
            <a-row>
              <a-col :span="16">
                <a-form-model-item v-if="isImport&&formData.importType==1" label="表或视图" prop="tableName" :label-col="{span:3}" :wrapper-col="{span:21}">
                      <a-select placeholder="请选择表或视图" v-model="formData.tableName" :getPopupContainer="node => node.parentNode">
                        <a-select-option v-for="item in originalTableList" :key="item" :value="item">{{
                            item
                          }}
                        </a-select-option>
                      </a-select>
                </a-form-model-item>
              </a-col>
              <a-col :span="2" :offset="1">
                <a-button v-if="isImport&&formData.importType==1" type="primary"  @click.prevent="importModel" >导入</a-button>
              </a-col>
            </a-row>
            <a-form-model-item label="模型名称" prop="modelName">
                <span v-if="isDetail">{{formData.modelName}}</span>
                <a-input v-else v-model="formData.modelName" placeholder="请输入模型名称"/>
            </a-form-model-item>
            <a-form-model-item label="模型描述" prop="remark">
                <span v-if="isDetail">{{formData.remark}}</span>
                <a-textarea v-else v-model="formData.remark" placeholder="请输入模型描述信息" allow-clear :auto-size="{ minRows: 3, maxRows: 5 }" />
            </a-form-model-item>
        
          <a-tabs defaultActiveKey="1" type="card">
            <a-tab-pane key="1" tab="字段信息">
              <!-- 数据字段 -->
              <div class="table-operator">
                <p class="title">数据字段：</p>
                <div v-if="!isDetail">
                  <a-button type="link" icon="plus" @click="handleAddModelFields">新增数据字段</a-button>
                  <a-button type="link" v-if="dataSelectedRowKeys.length" icon="minus" @click="handleRemoveModelFields('dataSelectedRowKeys','modelFields')">删除</a-button>
                </div>
              </div>
              <a-table
                style="margin-bottom:20px;"
                size="middle"
                bordered
                :rowKey="(record, index) => index"
                :columns="columns"
                :data-source="formData.modelFields"
                :pagination="false"
                :row-selection="isDetail?null:{selectedRowKeys: dataSelectedRowKeys, onChange: onDataSelectChange}"
              >
                <div slot="fieldName" slot-scope="text, record">
                  <span v-if="isDetail">{{text}}</span>
                  <a-input
                    v-else
                    style="margin: -5px 0"
                    :value="text"
                    v-model="record['fieldName']"
                  />
                </div>
                <div slot="fieldTypeName" slot-scope="text, record">
                  <span v-if="isDetail">{{text}}</span>
                  <a-select v-else show-search v-model="record.fieldTypeName" :getPopupContainer="node => node.parentNode">
                    <a-select-option v-for="(type,index) in dataTypes" :key="index" :value="type">
                      {{type}}
                    </a-select-option>
                  </a-select>
                </div>
                <div slot="remark" slot-scope="text, record">
                  <span v-if="isDetail">{{text}}</span>
                  <a-input
                    v-else
                    style="margin: -5px 0"
                    :value="text"
                    v-model="record['remark']"
                  />
                </div>
                <div slot="primarykeyFlag" slot-scope="text, record">
                  <a-checkbox :disabled="isDetail" :checked="record['primarykeyFlag']" @change="checkboxChange(record,'primarykeyFlag')"  style="margin: -5px 0" ></a-checkbox>
                </div>
                <div slot="emptyFlag" slot-scope="text, record">
                  <a-checkbox :disabled="isDetail" :checked="record['emptyFlag']" @change="checkboxChange(record,'emptyFlag')"  style="margin: -5px 0" ></a-checkbox>
                </div>
                <div slot="length" slot-scope="text, record, index">
                  <span v-if="isDetail">{{text}}</span>
                  <a-form-model-item class="length-form-item" v-else :prop="'modelFields.' + index + '.length'" :rules="{required: true,message: '请输入长度',trigger: 'change'}" :wrapper-col="{span:21}"> 
                    <a-input type="number" style="margin: -5px 0" v-model.number="record['length']" />
                  </a-form-model-item>
                </div>
              </a-table>
              <!-- 分区字段 -->
              <div class="table-operator">
                <p class="title">分区字段：</p>
                <div v-if="!isDetail">
                  <a-button type="link" icon="plus" @click="handleAddModelPartitions">新增分区字段</a-button>
                  <a-button type="link" v-if="partitionsSelectedRowKeys.length" icon="minus" @click="handleRemoveModelFields('partitionsSelectedRowKeys','modelPartitions')">删除</a-button>
                </div>
              </div>
              <a-table
                size="middle"
                bordered
                :rowKey="(record, index) => index"
                :columns="partitionsColumns"
                :data-source="formData.modelPartitions"
                :pagination="false"
                :row-selection="isDetail?null:{selectedRowKeys: partitionsSelectedRowKeys, onChange: onPartitionsSelectChange}"
              >
                <div slot="partitionName" slot-scope="text, record">
                  <span v-if="isDetail">{{text}}</span>
                  <a-input
                    v-else
                    style="margin: -5px 0"
                    :value="text"
                    v-model="record['partitionName']"
                  />
                </div>
                <div slot="partitionTypeId" slot-scope="text, record">
                  <span v-if="isDetail">{{text}}</span>
                  <a-input
                    v-else
                    type="number"
                    style="margin: -5px 0"
                    :value="text"
                    v-model="record['partitionTypeId']"
                  />
                </div>
                <div slot="remark" slot-scope="text, record">
                  <span v-if="isDetail">{{text}}</span>
                  <a-input
                    v-else
                    style="margin: -5px 0"
                    :value="text"
                    v-model="record['remark']"
                  />
                </div>
              </a-table>
            </a-tab-pane>
          </a-tabs>
        </a-form-model>
      </div>
    </j-modal>
    </div>
</template>
<script>
import { getDataModuleDetail, getDataSourceList, getDataSourceTables, getModalByTable, getModalByDDL, getDataTypes } from '@/api/api'
import { postAction, putAction, getAction } from '@/api/manage'
import { validateSome } from "@/utils/util"
export default {
  name: 'AddModelModal',
  data() {
    return {
      dataTypes:[],
      isImport:false,
      originalTableList:[],
      originalList:[],
      isDetail:false,
      labelCol: { span: 2 },
      wrapperCol: { span: 14 },
      editModalVisible: false,
      title: '编辑',
      syncLoading: false,
      fullscreen: true,
      switchFullscreen: true,
      dataSelectedRowKeys: [],
      partitionsSelectedRowKeys:[],
      partitionsColumns:[
          {
          title: '字段名称',
          align: 'center',
          width: '15%',
          dataIndex: 'partitionName',
          scopedSlots: { customRender: 'partitionName' }
        },
        {
          title: '字段类型',
          align: 'center',
          width: '12%',
          dataIndex: 'partitionTypeId',
          scopedSlots: { customRender: 'partitionTypeId' }
        },
        {
          title: '描述',
          align: 'center',
          dataIndex: 'remark',
          scopedSlots: { customRender: 'remark' }
        },
        {
          title: '关联数据元',
          align: 'center',
          dataIndex: 'metadataId',
          width: '12%',
        //   scopedSlots: { customRender: 'metadataId' }
        },
        // {
        //   title: '操作',
        //   align: 'center',
        //   dataIndex: 'action',
        //   width: '8%',
        //   scopedSlots: { customRender: 'action' }
        // }
      ],
      columns: [
        {
          title: '字段名称',
          align: 'center',
          width: '15%',
          dataIndex: 'fieldName',
          scopedSlots: { customRender: 'fieldName' }
        },
        {
          title: '字段类型',
          align: 'center',
          width: '12%',
          dataIndex: 'fieldTypeName',
          scopedSlots: { customRender: 'fieldTypeName' }
        },
        {
          title: '描述',
          align: 'center',
          dataIndex: 'remark',
          scopedSlots: { customRender: 'remark' }
        },
        {
          title: '关联数据元',
          align: 'center',
          dataIndex: 'metadataId',
          width: '12%',
        //   scopedSlots: { customRender: 'metadataId' }
        },
        {
          title: '是否为主键',
          align: 'center',
          dataIndex: 'primarykeyFlag',
          width: '12%',
          scopedSlots: { customRender: 'primarykeyFlag' }
        },
        {
          title: '是否为空',
          align: 'center',
          dataIndex: 'emptyFlag',
          width: '12%',
          scopedSlots: { customRender: 'emptyFlag' }
        },
        {
          title: '长度',
          align: 'center',
          dataIndex: 'length',
          width: '8%',
          scopedSlots: { customRender: 'length' }
        },
        // {
        //   title: '操作',
        //   align: 'center',
        //   dataIndex: 'action',
        //   width: '8%',
        //   scopedSlots: { customRender: 'action' }
        // }
      ],
      url: {
        edit: '/modelManagement/data-module',
        add: '/modelManagement/data-module'
      },
      rules: {
        modelName: [
          { required: true, message: '请输入模型名称', trigger: 'change' }
        ],
        source: [
          { required: true, message: '请选择数据源', trigger: 'change' }
        ],
        tableName: [
          { required: true, message: '请选择表或视图', trigger: 'change' }
        ],
        importType:[
          { required: true, message: '请选择导入类型', trigger: 'change' }
        ],
        sql:[
          { required: true, message: '请输入DDL语句', trigger: 'change' }
        ],
        dbType:[
          { required: true, message: '请选择DDL类型', trigger: 'change' }
        ],
      },
      formData: {
        source:null,
        tableName:'',
        modelName:'',
        remark:'',
        modelFields:[],
        modelPartitions:[],
        folderId:null,
        id:null,
        importType:1,
        sql:'',
        dbType:''
      },
      newModelFieldsData: {
        fieldName:'',
        fieldTypeName:'',
        remark:'',
        metadataId:null,
        primarykeyFlag:true,
        emptyFlag:false,
        length:255
      },
      newModelPartitionsData:{
        partitionName:'',
        partitionTypeId:null,
        remark:'',
        metadataId:null
      }
    }
  },
  watch: {
    editModalVisible(newVal){
      if(newVal){
        getDataTypes('HIVE').then((res)=>{
          this.dataTypes=res.result
        })
      }
    }
  },
  mounted() {
  },
  methods: {
    importTypeChange(){
      let {folderId,importType} = this.formData
      this.formData=this.$options.data().formData
      this.formData={
        ...this.formData,
        folderId,
        importType
      }
    },
    ddlImport(){
      const valiSome = ['sql','dbType']
      const that = this
      const validFlag= validateSome('ruleForm',valiSome,that)
      if(validFlag){
        let {folderId,sql,dbType}=this.formData
        let params={
          folderId,
          sql,
          dbType
        }
        getModalByDDL(params).then(res=>{
          if(res.success){
            this.formData = {
              ...this.formData,
              ...res.result
            }
          }else{
            this.$message.warning(res.message)
          }
        })
      }
    },
    importModel(){
      const valiSome = ['source','tableName']
      const that = this
      const validFlag= validateSome('ruleForm',valiSome,that)
      if(validFlag){
        let {folderId,source,tableName}=this.formData
        let params={
          folderId,
          tableName,
          source
        }
        getModalByTable(params).then(res=>{
          if(res.success){
            this.formData = {
              ...this.formData,
              ...res.result
            }
          }else{
            this.$message.warning(res.message)
          }
        })
      }
    },
    updateOriginal(v) {
      this.formData.source = v
      this.formData.tableName = ''
      this.originalTableList=[]
      const that = this
      getDataSourceTables(v + '-0').then((res) => {
        if (res.success) {
          that.originalTableList = res.result
        }
      })
    },
    getOriginalList(){
      getDataSourceList({purpose:1}).then(res=>{
        this.originalList=res.result || []
      })
    },
    handleCancleDbSync() { // 关闭
      this.formData = this.$options.data().formData
      this.isImport = false
      this.isDetail = false
      this.editModalVisible = false
    },
    edit() {
      this.editModalVisible = true
      this.getDataDetail()
    },
    add() {
      this.editModalVisible = true
      if(this.isImport&&this.formData.importType==1){
        this.getOriginalList()
      }
    },
    getDataDetail(){
      console.log(this.formData.id,this.isDetail,'id');
      getDataModuleDetail({id:this.formData.id}).then((res) => {
        if(res.result){
          Object.keys(this.formData).forEach((key)=>{
            this.formData[key] = res.result[key]
          })
        }
      })
    },
    async handleDbSync() { // 弹窗点击确定
        const valid = await this.$refs['ruleForm'].validate()
        if (valid) {
            this.updateData()
        }
    },
    updateData() { // 保存提交数据
    console.log(this.formData.id);
      this.syncLoading = true
      const fun = (res) => {
          if (res.success) {
            this.$message.success(res.message)
            this.handleCancleDbSync()
            this.$emit('modalFormOk')
          } else {
            this.$message.warning(res.message)
          }
      }
      if (this.formData.id) {
        //编辑数据模型
        putAction(this.url.edit, this.formData).then(
          fun
        ).finally(() => {
          this.syncLoading = false
        })
      } else {
        //新增数据模型
        postAction(this.url.add, this.formData).then(
          fun
        ).finally(() => {
          this.syncLoading = false
        })
      }
    },
    handleAddModelPartitions() { // 新增分区字段
      const newData = {...this.newModelPartitionsData}
      this.formData.modelPartitions.push(newData)
    },
    handleAddModelFields() { // 新增数据字段
      const newData = {...this.newModelFieldsData}
      this.formData.modelFields.push(newData)
    },

    handleRemoveModelFields(rowKeysName,modelName) { // 删除数据字段
      var that = this
      this[rowKeysName].sort(function(a, b) { return b - a })
      this[rowKeysName].forEach(function(index) {
        that.formData[modelName].splice(index, 1)
      })
      this[rowKeysName] = []
    },
    onPartitionsSelectChange(partitionsSelectedRowKeys){
        this.partitionsSelectedRowKeys = partitionsSelectedRowKeys
    },
    onDataSelectChange(dataSelectedRowKeys) {
      this.dataSelectedRowKeys = dataSelectedRowKeys
    },
    checkboxChange(data, name) {
      if (data[name]) {
        data[name] = false
      } else {
        data[name] = true
      }
    }
  }
}
</script>
<style lang="less" scoped>
.warp .ant-select{
  width: 100%;
}
.ddl-style{
  text-align: right;
  margin-bottom: 24px;
}
.warp .table-operator{
//   margin-bottom: 10px;
  display:flex;
  justify-content: space-between;
  line-height:35px;
  .title{
      margin-bottom:0;
  }
}
.ant-card-body .warp {
  padding: 10px;
}
.warp .table-operator .ant-btn{
  margin: 0px 8px 0 0 !important;
}
.ant-card-body .warp .table-operator{
  margin-bottom:10px !important;
}
// /deep/ .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab-active{
//     border-top: 3px solid #1890FF;
// }
/deep/ .length-form-item.ant-form-item{
  margin-bottom:0 !important;
}
.table-page-search-wrapper{
  overflow:auto;
}
</style>
<style scoped>
@import '~@assets/less/common.less'
</style>